<template>
  <div style="">
    <div class="login-wrap">
      <div style="font-size: 60px;">
        <a href="#"
           style="display: flex;justify-content: center;padding-top: 20px;color:#545454;text-decoration: none;">LO<span
            style="color: #c4c4c4">V</span><span>O</span> | 朗沃商城</a>
      </div>
      <div style="display: flex">
        <div style="width: 1000px;text-align:center">
          <p style="font-size: 45px;color: white;padding-top: 140px">成功起点，LOVO首选</p>
          <p style="font-size: 26px;color:#d3d3d3;">优质产品，超低价格，太好逛了吧</p>
          <p style="font-size: 26px;color:#d3d3d3;">好生活，购实惠</p>
        </div>
        <div style="display: flex;padding-top: 162px">
          <el-card class="box-card" style="width: 240px;height: 220px">
            <div style="margin-bottom: 20px">
              <span style="margin-bottom: 20px;font-size: 16px">用户登录</span>
              <el-link type="success" @click="$router.push('register')" style="margin-left: 80px">快速注册</el-link>
              <!--              <el-button style="margin-bottom: 20px" type="text">快速注册</el-button>-->
            </div>
            <div>
              <el-form :model="loginFrom" :rules="rules" ref="loginFrom" label-width="0px">
                <el-form-item prop="userName">
                  <div style="display: flex">
                    <el-input v-model="loginFrom.userName" placeholder="请输入用户名" style="width: 200px;">
                      <template #prefix>
                        <el-icon>
                          <UserFilled/>
                        </el-icon>
                      </template>
                    </el-input>
                  </div>
                </el-form-item>
                <el-form-item prop="userPassword">
                  <div style="display: flex">
                    <el-input type="password" v-model="loginFrom.userPassword" placeholder="请输入密码"
                              style="width: 200px;">
                      <template #prefix>
                        <el-icon>
                          <Lock/>
                        </el-icon>
                      </template>
                    </el-input>
                  </div>
                </el-form-item>
                <div style="display: flex">
                  <el-button type="primary" @click="userLogin()" style="width: 200px;">登录</el-button>
<!--                  <el-button type="primary" @click="adminLogin()" style="width: 90px;margin-left: 10px">管理员登录</el-button>-->
                </div>
              </el-form>
            </div>
          </el-card>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "Login",
  data() {
    return {
      loginFrom: {},
      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        userPassword: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
      },
    }
  },
  methods: {
    userLogin () {
      this.$refs['loginFrom'].validate((valid) => {
        if (valid) {
          let param = {
            adminName: this.loginFrom.userName,
            adminPassword: this.loginFrom.userPassword
          }
          axios.post('api/admin/adminLogin', param).then(p => {
            if (p.data.code === 200) {
              console.log(p.data.data)
              sessionStorage.setItem("adminId", p.data.data.adminId);
              sessionStorage.setItem("adminNo", p.data.data.adminNo);
              sessionStorage.setItem('userToken', p.data.data);
              this.$router.push("admin");
              this.$notify({
                title: '成功',
                message: p.data.msg,
                type: 'success',
              })
            } else {
              axios.post('api/user/userLogin', this.loginFrom).then(p => {
                if (p.data.code === 200) {
                  //浏览器保存用户信息
                  sessionStorage.setItem('userToken', p.data.data.userToken);
                  sessionStorage.setItem("userId", p.data.data.user.userId);
                  sessionStorage.setItem("userNo", p.data.data.user.userNo);
                  sessionStorage.setItem("userDiscount", p.data.data.user.userDiscount);
                  sessionStorage.setItem('user', JSON.stringify(p.data.data.user));
                  this.userToken=p.data.data.userToken;
                  if(p.data.data.user.frozenStatus===2){
                    this.$notify.error({
                      title: '错误',
                      message: "用户已被冻结",
                    })
                  }else{
                    this.$router.push("app");
                    this.$notify({
                      title: '成功',
                      message: p.data.msg,
                      type: 'success',
                    })
                  }
                } else {
                  this.$notify.error({
                    title: '错误',
                    message: p.data.msg,
                  })
                }
              });
            }
          });
        } else {
          this.$notify({
            title: '警告',
            message: '请完成信息填写，谢谢',
            type: 'warning',
          })
          return false;
        }
      })
    },
    adminLogin() {
      this.$refs['loginFrom'].validate((valid) => {
        if (valid) {
          let param = {
            adminName: this.loginFrom.userName,
            adminPassword: this.loginFrom.userPassword
          }
          axios.post('api/admin/adminLogin', param).then(p => {
            if (p.data.code === 200) {
              console.log(p.data.data)
              sessionStorage.setItem("adminId", p.data.data.adminId);
              sessionStorage.setItem("adminNo", p.data.data.adminNo);
              sessionStorage.setItem('userToken', p.data.data);
              this.$router.push("admin");
              this.$notify({
                title: '成功',
                message: p.data.msg,
                type: 'success',
              })
            } else {
              this.$notify.error({
                title: '错误',
                message: p.data.msg,
              })
            }
          });
        } else {
          this.$notify({
            title: '警告',
            message: '请完成信息填写，谢谢',
            type: 'warning',
          })
          return false;
        }
      })
    },
  }
}
</script>

<style scoped>
/*body div:nth-child(2){
  height: 100%;
}*/
/*body div:nth-of-type(1){
  height: 100%;
}*/
#app {
  height: 100%;
}

body > div > div {
  height: 100%;
}

div {

}

.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  /*background-image: url(../assets/img/login-bg.jpg);*/
  /*background-color: #2d8cf0;*/
  /* 背景渐变色 - 原理2 */
  /*background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/
  background: linear-gradient(-45deg, #FA8BFF, #2BD2FF, #2BFF88);
  /* 背景尺寸 - 原理3 */
  background-size: 600% 600%;
  /* 循环动画 - 原理4 */
  animation: gradientBG 7s ease infinite;

  /*background-size: 100%;*/


}

/* 动画，控制背景 background-position */
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>